<script setup lang="ts">
import StartPage from './components/StartPage.vue'
import NavBar from './components/NavBar.vue'
import HeaderCarousel from './components/HeaderCarousel.vue'
import InfoOne from './components/InfoOne.vue'
import InfoTwo from './components/InfoTwo.vue'
import InfoThree from './components/InfoThree.vue'
import InfoCarousel from './components/InfoCarousel.vue'
import { onMounted } from 'vue';

// todo 不应是靠滚动条，而是监听滚动事件使用带动画的显示隐藏模拟滚动
function limitScrollTo100vh() {
  let throttleTimer:any = null;
  const throttleDelay = 500; // 节流延迟

  // 获取窗口的高度（100vh）
  let lastScrollPosition:number = 0
  const windowHeight = window.innerHeight;

  // 添加滚动事件监听器
  window.addEventListener('scroll', (e) => {
    // 获取当前滚动位置
    const currentScrollPosition = window.scrollY;

    // 检测滚动方向
    const scrollDirection = currentScrollPosition > lastScrollPosition ? 'down' : 'up';

    // 更新上一次的滚动位置
    lastScrollPosition = currentScrollPosition;

    if (!throttleTimer) {
      // 计算应滚动到的位置
      const scrollToPosition = scrollDirection === 'down' ?
        Math.ceil(currentScrollPosition / windowHeight) * windowHeight :
        Math.floor(currentScrollPosition / windowHeight) * windowHeight;

      console.log('scrollToPosition', scrollToPosition)
      console.log('windowHeight', windowHeight)

      // 使用滚动动画滚动到计算出的位置
      window.scrollTo({
        top: scrollToPosition,
        behavior: 'smooth', // 可以使用 'auto' 或 'smooth' 控制滚动方式
      });

      throttleTimer = setTimeout(() => {
        throttleTimer = null;
      }, throttleDelay);
    } else {
      e.preventDefault()
    }
  });
}

onMounted(() => {
    limitScrollTo100vh()
})
</script>

<template>
    <!-- 仅要求存在可以跳转到其他人的页面的顶部栏，具体样式自行实现 -->
    <div class="sqm-view">
        <!-- 借鉴页面 https://wagyu-jfoodo.jetro.go.jp/us/ -->
        <StartPage/>
        <NavBar />
        <HeaderCarousel />
        <InfoOne />
        <InfoTwo />
        <InfoThree />
        <InfoCarousel />
    </div>
</template>

<style scoped>
.sqm-view{
    background: #f5f5f5;
    /* width: 100%; */
    /* overflow: hidden; */
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    /* overflow-x: hidden;
    overflow-y: auto; */
}
.sqm-view::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
